<template>
	<view class="cu-modal bottom-modal"  :class="is_show ? 'show' : ''" @touchmove.stop.prevent="" :disable-scroll="true">
		<view class="cu-dialog">
			<slot></slot>
		</view>
		<view class="mask" @click.stop="maskClose"></view>
	</view>

</template>

<script setup>
const {proxy} = getCurrentInstance()
const emit = defineEmits(['update:modelValue', 'maskClose']);
const props = defineProps({
	modelValue: { required: true },
})
const is_show = ref(false)

//监听数据
watch(
    () => props.modelValue,
    (value) => {
        is_show.value = value
    },
    { immediate: true }
);

function maskClose() {
	is_show.value = false
	emit('update:modelValue', is_show.value)
	emit('maskClose')
}
</script>
<style lang="scss" scoped>
.mask{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 98;
}
.cu-dialog{
	z-index: 100;
}

</style>